*::after, *::before {
  box-sizing: border-box;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #353535;
}

.container h2 {
  position: absolute;
  font-size: 12em;
  color: #444;
  line-height: 1em;
  text-shadow: -2px 2px 0 #222,
    -4px 4px 0 #222,
    -6px 6px 0 #222,
    -8px 8px 0 #222,
    -10px 10px 0 #222,
    -10px 10px 0 #222,
    -12px 12px 0 #222,
    -14px 14px 0 #222,
    -16px 16px 0 #222,
    -18px 18px 20px #000,
    -18px 18px 30px #000,
    -18px 18px 50px #000,
    -18px 18px 150px #000;
}

.container h2:nth-child(2) {
  color: #03a9f4;
  text-shadow: -2px 2px 0 #0375a9,
  -4px 4px 0 #0375a9,
  -6px 6px 0 #0375a9,
  -8px 8px 0 #0375a9,
  -10px 10px 0 #0375a9,
  -10px 10px 0 #0375a9,
  -12px 12px 0 #0375a9,
  -14px 14px 0 #0375a9,
  -16px 16px 0 #0375a9,
  -18px 18px 20px #000,
  -18px 18px 30px #000,
  -18px 18px 50px #000,
  -18px 18px 150px #000;
  clip-path: circle(20% at 50% 100%);
  transition: clip-path 2.5s;
}

.container h2:hover:nth-child(2) {
  clip-path: circle(50% at 50% 100%);
  z-index: 100;
}

.container h2:nth-child(3) {
  color: #2cff37;
  text-shadow: -2px 2px 0 #08a010,
  -4px 4px 0 #08a010,
  -6px 6px 0 #08a010,
  -8px 8px 0 #08a010,
  -10px 10px 0 #08a010,
  -10px 10px 0 #08a010,
  -12px 12px 0 #08a010,
  -14px 14px 0 #08a010,
  -16px 16px 0 #08a010,
  -18px 18px 20px #000,
  -18px 18px 30px #000,
  -18px 18px 50px #000,
  -18px 18px 150px #000;
  clip-path: circle(20% at 0% 10%);
  transition: clip-path 2.5s;
}

.container h2:hover:nth-child(3) {
  clip-path: circle(120% at 0% 110%);
  z-index: 100;
}

.container h2:nth-child(4) {
  color: #e91e63;
  text-shadow: -2px 2px 0 #ae0840,
  -4px 4px 0 #ae0840,
  -6px 6px 0 #ae0840,
  -8px 8px 0 #ae0840,
  -10px 10px 0 #ae0840,
  -10px 10px 0 #ae0840,
  -12px 12px 0 #ae0840,
  -14px 14px 0 #ae0840,
  -16px 16px 0 #ae0840,
  -18px 18px 20px #000,
  -18px 18px 30px #000,
  -18px 18px 50px #000,
  -18px 18px 150px #000;
  clip-path: circle(20% at 100% 15%);
  transition: clip-path 2.5s;
}

.container h2:hover:nth-child(4) {
  clip-path: circle(120% at 100% 50%);
  z-index: 100;
}